<template>
  <PageLayout class="form-container">
    <a-card>
      <div class="form-title">
        {{ route.query.id ? "编辑" : "新增" }}APP版本
      </div>
      <div class="form-box w-600">
        <a-form
          :model="formState"
          :rules="rules"
          ref="formRef"
          layout="Vertical"
          :labelCol="{ style: { width: '80px' } }"
          :wrapperCol="{ style: { width: 'calc(100% - 80px)' } }"
        >
          <a-form-item label="版本名称" name="name" required>
            <a-input
              v-model:value="formState.name"
              placeholder="请输入版本名称"
              :maxlength="50"
            />
          </a-form-item>
          <a-form-item label="版本号" name="version" required>
            <a-input
              type="number"
              v-model:value="formState.version"
              placeholder="请输入版本号"
              :maxlength="50"
            />
          </a-form-item>
          <a-form-item label="系统类型" name="os" required>
            <a-select
              v-model:value="formState.os"
              placeholder="请选择系统类型"
              :options="[
                {
                  label: 'iOS',
                  value: '0',
                },
                {
                  label: 'Android',
                  value: '1',
                },
              ]"
            />
          </a-form-item>

          <a-form-item label="版本描述" name="remark" required>
            <a-textarea
              v-model:value="formState.remark"
              placeholder="请输入"
              :options="options"
              :maxlength="300"
            />
          </a-form-item>
          <a-form-item
            label="版本文件"
            name="fileUrl"
            :rules="[{ required: true, message: '请输入版本文件' }]"
          >
            <!-- <UploadFile
              ref="uploadRef"
              :fileNum="1"
              :show-upload-list="{ showDownloadIcon: false }"
              label-name="上传版本文件"
              :multiple="false"
              @change="uploadChange"
            ></UploadFile> -->
            <a-input
              v-model:value="formState.fileUrl"
              placeholder="请输入版本文件"
              :maxlength="200"
            />
          </a-form-item>

          <a-button
            type="primary"
            class="float-right"
            style="width: 100px"
            @click="save"
            >保存</a-button
          >
        </a-form>
      </div>
    </a-card>
  </PageLayout>
</template>

<script setup>
import {
  postAppVersionAdd,
  postRoleUpdate,
  postRoleDetail,
} from "@/api/common";
import { postMenuTreeList } from "@/api/system";
import { useStoreCommonEnum } from "@/store";
import { message } from "ant-design-vue";
import { onMounted } from "vue";

const storeCommonEnum = useStoreCommonEnum();

const route = useRoute();
const router = useRouter();
const formRef = ref(null);

const formState = reactive({
  id: "",
  name: "",
  version: "",
  os: undefined,
  remark: "",
  fileUrl: "",
  fileName: "",
  fileLength: "",
});
const treeData = ref([]);

function resetTreeData(tree) {
  let resultTree = [];
  tree.forEach((item) => {
    let btnList = item.childrenList?.filter((ele) => {
      return ele.menuType == "F";
    });
    let curComponent = {
      ...item,
      // children: item.childrenList,
      label: item.menuName,
      value: item.id,
      btnList,
    };
    console.log("curComponent", curComponent);
    curComponent.children = resetTreeData(item.childrenList);
    resultTree.push(curComponent);
  });

  return resultTree;
}

onMounted(async () => {
  if (route.query.id) {
    postRoleDetail({ id: route.query.id }).then((res) => {
      for (let key in formState) {
        formState[key] = res.data[key];
      }
    });
  }
});

const rules = {
  // roleName: [{ required: true, message: "请输入产品型号", trigger: "blur" }],
  // username: [{ required: true, message: "请输入CODE", trigger: "blur" }],
  // menuIds: [{ required: true, message: "请选择部门", trigger: "blur" }],
};
const uploadChange = (file) => {
  console.log('file',file);
  if (file && file.length) {
    formState.fileUrl = file[0].url;
    formState.fileName = file[0].name;
    formState.fileLength = file[0].fileLength;
  } else {
    formState.fileUrl = undefined;
    formState.fileName = undefined;
    formState.fileLength = undefined;
  }
  console.log("formState", formState);
  formRef.value.validate("fileUrl");
};
const save = () => {
  formRef.value.validate().then(() => {
    const requestUrl = postAppVersionAdd;
    requestUrl({ ...formState }).then(() => {
      message.success(formState.id ? "编辑成功" : "新增成功");
      router.go(-1);
    });
  });
};
</script>

<style lang="less" scoped>
.btn-box {
  margin-top: 24px;
  margin-left: 130px;
  :deep(.ant-btn) {
    margin-right: 16px;
  }
}
</style>
